<template>
  <div class="camerasBox">
    <div class="camerasTop">
      <img
        src="../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="goBackcameras"
      />
      <b>拍照</b>
    </div>
    <div class="camerasBox1">
      <b class="iconfont iconfontCameras" @click="takePicture">&#xe609;</b>
      <video ref="videoElement" autoplay @click="capturePicture"></video>
      <img class="img" v-if="snapshot" :src="snapshot" alt="Snapshot" />
      <button class="btn" @click="download">下载</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// const buttonVisible = ref(true);

const videoElement = ref(null);
const stream = ref(null);
const snapshot = ref(null);

const goBackcameras = () => {
  router.go(-1);
};

const takePicture = async () => {
  //   buttonVisible.value = !buttonVisible.value;
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(
      (device) => device.kind === "videoinput"
    );
    if (videoDevices.length > 0) {
      const constraints = { video: true };
      stream.value = await navigator.mediaDevices.getUserMedia(constraints);
      console.log(123, stream.value);

      if (stream.value) {
        videoElement.value.srcObject = stream.value;
      }
    } else {
      console.error("没有可用的摄像头设备。");
    }
  } catch (error) {
    console.error("无法访问摄像头：", error);
  }
};

const capturePicture = () => {
  const canvas = document.createElement("canvas");
  canvas.width = videoElement.value.videoWidth;
  canvas.height = videoElement.value.videoHeight;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height);
  snapshot.value = canvas.toDataURL("image/png");
};

onMounted(() => {
  // 可以在这里进行一些初始化操作，比如设置视频元素的尺寸等
});

onUnmounted(() => {
  // 组件卸载时，停止视频流
  if (stream.value) {
    stream.value.getTracks().forEach((track) => track.stop());
  }
});
const download = () => {
  const link = document.createElement("a");
  link.href = snapshot.value;
  link.download = "snapshot.png";
  document.body.appendChild(link);
  link.click();
  link.remove();
};
</script>

<style lang="scss">
.camerasBox {
  width: 100%;
  height: 100%;
}
.camerasTop {
  width: 300px;
  height: 50px;
  margin: 10px 30px;
  display: flex;
  align-items: center;
}
.camerasTop b {
  font-size: 20px;
  padding-left: 40px;
}

.el-icon-back {
  font-size: 25px;
}
.camerasBox1 {
  width: 375px;
  height: 615px;
}
.iconfontCameras {
  width: 375px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  font-size: 30px;
}
.camerasBox1 video {
  width: 300px;
  height: 200px;
  margin: 10px 30px;
  border: 1px solid #efeaea;
}
.camerasBox1 img {
  width: 300px;
  height: 200px;
  margin: 10px 30px;
  border: 1px solid #efeaea;
}
.camerasBox1 .btn {
  width: 300px;
  margin: 10px 30px;
}
</style>